<template>
	<view>
		<view class="bg" style="width: 100%;height:100%;background-color:#F7F7F7">
			<view class="box1">
				<view class="box_left">
					<view class="charts-box1">
						<qiun-data-charts type="arcbar" :chartData="chartData1" :loadingType="5" background="none" />
					</view>
				</view>
				<view class="box_right">
					<view class="charts-box2">
						<qiun-data-charts type="arcbar" :chartData="chartData1" :loadingType="5" background="none" />
					</view>
					<view class="charts-box3">
						<qiun-data-charts type="arcbar" :chartData="chartData1" :loadingType="5" background="none" />
					</view>
				</view>

			</view>
			<view class="box2">
				<view class="box2_content">
					<view class="box2_text"></view>
					<view class="box2_charts"></view>
				</view>
			</view>
			<view class="box3">
				<view class="box3_content">
					<view class="box3_text"></view>
					<view class="box3_charts"></view>
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				chartData1: {
					categories: [],
					series: [{
						"name": "正确率",
						"data": 0.8,
						"color": "#2fc25b"
					}],
				}
			}

		}
	}
</script>

<style lang="scss">
	.box1{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin: 0 auto 10rpx auto;
		border-radius:5px ;
		width: 90%;
		height: 400rpx;
		background-color: #FFFFFF;
	}

	.box_left {
		width: 50%;
	}

	.box_right {
		width: 30%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.charts-box1 {

		width: 50%;
		height: 300rpx;
		margin: 50rpx 0 50rpx ;

	}

	.charts-box2 {

		width: 106rpx;
		height: 150rpx;
		margin: 25rpx 100rpx;

	}

	.charts-box3 {

		width: 106rpx;
		height: 150rpx;
		margin: 25rpx 100rpx;

	}
	.box2{
		height: 365rpx;
		width: 90%;
		background-color: #FFFFFF;
		margin: 10rpx auto;
		border-radius:5px ;
		.box2_content{
			display: flex;
			flex-direction: column;
			background-color: #C0C0C0;
			margin: auto;
			width: 90%;
			height: 90%;
			
		}
	}
	.box3{
		width: 90%;
		height: 340rpx;
		background-color: #FFFFFF;
		margin: 10rpx auto;
		border-radius:5px ;
		.box3_content{
			display: flex;
			flex-direction: column;
			margin: auto;
			width: 80%;
		}
	}
</style>
